<template>
    <el-form
        :model="value"
        label-position="right"
        label-width="80px"
        size="small"
    >
        <el-row :gutter="20">
            <el-col v-for="(item, ind) in formConfig.formList"
                    :key="ind + ' '"
                    :md="8"
            >
                <el-form-item
                    :label="`${item.label} ${isColonFn(item)}`"
                    :prop="item.prop"
                >
                    <el-input
                        v-if="item.type==='input'"
                        v-model="value[item.prop]"
                        :disabled="item.disabled"
                        :placeholder="item.placeholder || '请输入'+item.label"
                        style="width: 80%;"
                    />
                    <el-select
                        v-else-if="item.type==='select'"
                        v-model="value[item.prop]"
                        :disabled="item.disabled"
                        :placeholder="item.placeholder"
                        style="width: 80%;"
                    >
                        <el-option
                            v-for="(optItem, index) in item.optList"
                            :key="index"
                            :label="optItem.label"
                            :value="optItem.value"
                        />
                    </el-select>
                    <el-radio-group
                        v-else-if="item.type=='radio'"
                        v-model="value[item.prop]"
                        :disabled="item.disabled"
                    >
                        <el-radio
                            v-for="(radio, lis) in item.radiotList"
                            :key="lis"
                            :label="radio.value"
                        >
                            {{ radio.name }}
                        </el-radio>
                    </el-radio-group>
                    <el-cascader
                        v-else-if="item.type=='cascader'"
                        v-model="value[item.prop]"
                        :options="item.options"
                        @change="item.handleChange"
                    />
                    <el-time-picker
                        v-else-if="item.type=='timePicker'"
                        v-model="value[item.prop]"
                        :arrow-control="item.arrowControl"
                        :picker-options="item.pickerOptions"
                        :placeholder="item.placeholder"
                    />
                    <el-date-picker
                        v-else
                        v-model="value[item.prop]"
                        :value-format="item.dateFormate"
                        :clearable="false"
                        :type="item.type"
                        :disabled="item.disabled"
                        :placeholder="item.label"
                        range-separator="至"
                        start-placeholder="起始时间"
                        end-placeholder="终止时间"
                        style="width: 80%;"
                    />
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item>
            <el-button type="primary">搜索</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import PageMain from '@/components/PageMain'

export default {
    name: 'SearchForm',
    components: {PageMain},
    props: {
        formConfig: {
            type: Object,
            required: true
        },
        value: {
            type: Object,
            required: true
        }
    },
    data() {
        return {}
    },
    mounted() {
        this.setDefaultValue()
    },
    methods: {
        // 设置默认值
        setDefaultValue() {
            const formData = {...this.value}
            this.formConfig.formList.forEach(({key, value}) => {
                if (formData[key] === undefined || formData[key] === null) {
                    formData[key] = value
                }
            })
            this.$emit('input', formData)
        },
        isColonFn(item) {
            let colon = ''
            if (item.label) {
                if (item.isColon) {
                    colon = ''
                } else {
                    colon = ':'
                }
            } else {
                colon = ''
            }
            return colon
        }
    }
}
</script>

<style scoped lang="scss">
::v-deep .el-date-editor .el-range-separator {
    width: 9%;
}
</style>
